<template>
  <div>
    <el-card :bordered="false" shadow="never" class="ivu-mt" :body-style="{padding:0}">
      <div class="padding-add">
        <el-form
            ref="levelFrom"
            :model="levelFrom"
            :label-width="labelWidth"
            :label-position="labelPosition"
            inline
            @submit.native.prevent
        >
          <el-form-item label="审核状态：" label-for="status1">
            <el-select
                v-model="levelFrom.apply_status"
                placeholder="请选择"
                clearable
                element-id="status1"
				@change="userSearchs"
                class="form_content_width"
            >
              <el-option value="0" label="待审核"></el-option>
              <el-option value="1" label="已同意"></el-option>
              <el-option value="2" label="已拒绝"></el-option>
            </el-select>
          </el-form-item>
		  
		  <el-form-item label="审核类型：" label-for="status1">
		    <el-select
		        v-model="levelFrom.apply_type"
		        placeholder="请选择"
		        clearable
		        element-id="status1"
		        class="form_content_width"
		    >
		      <el-option value="1" label="添加用户"></el-option>
		      <el-option value="2" label="追加课程"></el-option>
		      <el-option value="3" label="修改年级"></el-option>
		    </el-select>
		  </el-form-item>
		  
          <el-form-item label="用户姓名：" label-for="real_name">
            <el-input
                clearable
                v-model="levelFrom.real_name"
                placeholder="请输入用户姓名"
                class="form_content_width"
            />
          </el-form-item>
		  <el-form-item label="用户账号：" >
		    <el-input
		        clearable
		        v-model="levelFrom.account"
		        placeholder="请输入用户账号"
		        class="form_content_width"
		    />
		  </el-form-item>
          <el-form-item>
            <el-button type="primary" v-db-click @click="userSearchs">查询</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-card>
    <el-card :bordered="false" shadow="never" class="ivu-mt mt16">
    <!--  <el-button v-auth="['admin-user-level_add']" type="primary" v-db-click @click="add"
      >添加用户等级</el-button> -->
      <el-table
        :data="levelLists"
        ref="table"
        class="mt14"
        v-loading="loading"
        highlight-current-row
        no-userFrom-text="暂无数据"
        no-filtered-userFrom-text="暂无筛选结果"
      >
        <el-table-column label="ID" width="50">
          <template slot-scope="scope">
            <span>{{ scope.row.id }}</span>
          </template>
        </el-table-column>
       
        
        <el-table-column label="真实姓名" min-width="100">
          <template slot-scope="scope">
            <span>{{ scope.row.real_name }}</span>
          </template>
        </el-table-column>
        <el-table-column label="登录账号" min-width="100">
          <template slot-scope="scope">
            <span>{{ scope.row.account }}</span>
          </template>
        </el-table-column>

        <el-table-column label="所属自习室" min-width="100">
          <template slot-scope="scope">
            <span>{{ scope.row.room_info }}</span>
          </template>
        </el-table-column>
		<el-table-column label="类型" min-width="100">
		  <template slot-scope="scope">
		    <span>{{ scope.row.applyfor_type_text }}</span>
		  </template>
		</el-table-column>
        
		<el-table-column label="性别" min-width="50">
		  <template slot-scope="scope">
		    <span v-if="scope.row.gender == 1">男</span>
		    <span v-if="scope.row.gender == 2">女</span>
		  </template>
		</el-table-column>
		<el-table-column label="审核状态" min-width="50">
		  <template slot-scope="scope">
		    <span v-if="scope.row.apply_status == 0" style="color: red;font-weight: 700;">待审核</span>
		    <span v-if="scope.row.apply_status == 1" >已同意</span>
		    <span v-if="scope.row.apply_status == 2" style="color: red;">已拒绝</span>
		  </template>
		</el-table-column>
		<el-table-column label="拒绝原因" min-width="150">
		  <template slot-scope="scope">
		    <span style="color: red;">{{ scope.row.refuse_text }}</span>
		  </template>
		</el-table-column>
		<el-table-column label="创建时间" min-width="100">
		  <template slot-scope="scope">
		    <span>{{ scope.row.create_time }}</span>
		  </template>
		</el-table-column>
        <el-table-column fixed="right" label="操作" width="130">
          <template slot-scope="scope">
			  
			 
			  <a v-if="scope.row.apply_status == 0 && roles == '777'" @click="applay(scope.row)">详情</a> 
			   <el-divider direction="vertical" v-if="scope.row.apply_status == 0 && roles == '777'"></el-divider>
            <el-dropdown size="small" @command="changeMenu(scope.row, $event, scope.$index)" :transfer="true">
              <span class="el-dropdown-link">更多<i class="el-icon-arrow-down el-icon--right"></i> </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item command="3">详情</el-dropdown-item>
                <el-dropdown-item command="2" v-if="roles == '777'">删除</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </template>
        </el-table-column>
      </el-table>
      <div class="acea-row row-right page">
        <pagination
          v-if="total"
          :total="total"
          :page.sync="levelFrom.page"
          :limit.sync="levelFrom.limit"
          @pagination="getList"
        />
      </div>
    </el-card>
    <!-- 等级任务-->
    <task-list ref="tasks"></task-list>
	
	
	
	
	
	<el-dialog
	  title="详情"
	  :visible.sync="dialogVisibleTwo"
	  width="40%"
	  >
	  
	  <div>
		  
		  <div v-if="now_item.applyfor_type == 1 || now_item.applyfor_type == 2" style="display: flex;font-size: 16px;margin-top: 20px;">
			  <div style="width: 25%;">选择的所有主科：</div>
			  <div>
				<div v-for="item in now_item.zhuke_list">
					科目:{{item.subject_name}}  ---  所属卡密({{item.carmine_text}})
				</div>
			  </div>	  
		  </div>
		  
		  <div v-if="now_item.applyfor_type == 1 || now_item.applyfor_type == 2" style="display: flex;font-size: 16px;margin-top: 20px;">
			  <div style="width: 25%;">选择的所有副科：</div>
			  <div>
				<div v-for="item in now_item.fu_list">
					科目:{{item.subject_name}}  ---  所属卡密({{item.carmine_text}})
				</div>
			  </div>	  
		  </div>
		  
		  <div style="display: flex;font-size: 16px;margin-top: 20px;">
			  <div style="width: 25%;">活动赠送副科：</div>
			  <div>{{now_item.zengsong_list}}</div>	  
		  </div>
		  
		  <div style="display: flex;font-size: 16px;margin-top: 20px;">
			  <div style="width: 25%;">是否激活听力：</div>
			  <div v-if="now_item.is_hearing == 1">激活</div>	  
			  <div v-else>未激活</div>	  
		  </div>
		  
		  <div style="display: flex;font-size: 16px;margin-top: 20px;">
			  <div style="width: 25%;">是否激活阅读理解：</div>
			  <div v-if="now_item.is_reading == 1">激活</div>	  
			  <div v-else>未激活</div>	  
		  </div>
		  
		  <div style="display: flex;font-size: 16px;margin-top: 20px;">
			  <div style="width: 25%;">申请类型：</div>
			  <div>{{now_item.applyfor_type_details}}</div>	  
		  </div>
		  
		  
		  <div  style="display: flex;font-size: 16px;margin-top: 20px;">
			  <div style="width: 25%;">所属班级：</div>
			  <div>{{now_item.class_text}}</div>	  
		  </div>
		  
		  <!-- <div v-if="now_item.applyfor_type == 1" style="display: flex;font-size: 16px;margin-top: 20px;">
			  <div style="width: 25%;">年龄：</div>
			  <div>{{now_item.age}}</div>	  
		  </div> -->
		  
		  <div v-if="now_item.applyfor_type == 1" style="display: flex;font-size: 16px;margin-top: 20px;">
			  <div style="width: 25%;">所属区域：</div>
			  <div>{{now_item.agent_province}}-{{now_item.agent_city}}-{{now_item.agent_district}}-{{now_item.detailed_address}}</div>	  
		  </div>
		  
		  <div v-if="now_item.applyfor_type == 1 || now_item.applyfor_type == 2" style="display: flex;font-size: 16px;margin-top: 20px;">
		  			  <div style="width: 25%;">毕业年：</div>
		  			  <div>{{now_item.graduate_text || '无'}}</div>	  
		  </div>
		  
		  <!-- <div v-if="now_item.applyfor_type == 1" style="display: flex;font-size: 16px;margin-top: 20px;">
			  <div style="width: 25%;">是否是测试号：</div>
			  <div v-if="now_item.is_ceshi == 1">测试号</div>	  
			  <div v-if="now_item.is_ceshi == 2">否</div>	  
		  </div> -->
		  
		  
		  <div v-if="now_item.applyfor_type == 1 && (now_item.class == 1 || now_item.class == 2 || now_item.class == 3 || now_item.class == 7)" style="display: flex;font-size: 16px;margin-top: 20px;">
			  <div style="width: 25%;">年级规划：</div>
			  <div v-if="now_item.grade_plan == 1">五四制</div>	  
			  <div v-if="now_item.grade_plan == 2">六三制</div>	  
		  </div>
		  
		  <div v-if="now_item.applyfor_type == 1" style="display: flex;font-size: 16px;margin-top: 20px;">
			  <div style="width: 25%;">是否复读：</div>
			  <div v-if="now_item.is_repeat == 1">是</div>	  
			  <div v-if="now_item.is_repeat == 2">否</div>	  
		  </div>
		  
		  <div v-if="now_item.applyfor_type == 1" style="display: flex;font-size: 16px;margin-top: 20px;">
			  <div style="width: 25%;">是否延期：</div>
			  <div v-if="now_item.is_extend == 1">否</div>	  
			  <div v-if="now_item.is_extend == 2">延期</div>	  
		  </div>
		  
		  <div style="display: flex;font-size: 16px;margin-top: 20px;">
			  <div style="width: 25%;">代理商所属分组：</div>
			  <div>{{now_item.grouping_name}}</div>	  
		  </div>
		  
		  <button @click="yantsie(now_item.copy_text)">复制</button>
		  
		  <div v-if="now_item.applyfor_type == 1" style="display: flex;font-size: 16px;margin-top: 20px;">
			  <div style="width: 25%;">备注：</div>
			  <div>{{now_item.mark}}</div>	  
		  </div>

	
	  </div>
	  
	  <span slot="footer" class="dialog-footer">
	    <el-button @click="dialogVisibleTwo = false">关 闭</el-button>
	  </span>
	</el-dialog>
	
	
	
	
	
	
	
	
	<el-dialog
	  title="审核用户"
	  :visible.sync="dialogVisible"
	  width="40%"
	  :before-close="handleClose">
	  
	  <div>
		  
		  <div v-if="now_item.applyfor_type == 1 || now_item.applyfor_type == 2" style="display: flex;font-size: 16px;margin-top: 20px;">
			  <div style="width: 25%;">选择的所有主科：</div>
			  <div>
				<div v-for="item in now_item.zhuke_list">
					科目:{{item.subject_name}}  ---  所属卡密({{item.carmine_text}})
				</div>
			  </div>	  
		  </div>
		  
		  <div v-if="now_item.applyfor_type == 1 || now_item.applyfor_type == 2" style="display: flex;font-size: 16px;margin-top: 20px;">
			  <div style="width: 25%;">选择的所有副科：</div>
			  <div>
				<div v-for="item in now_item.fu_list">
					科目:{{item.subject_name}}  ---  所属卡密({{item.carmine_text}})
				</div>
			  </div>	  
		  </div>
		  
		  <div style="display: flex;font-size: 16px;margin-top: 20px;">
			  <div style="width: 25%;">活动赠送副科：</div>
			  <div>{{now_item.zengsong_list}}</div>	  
		  </div>
		  
		  
		  <div v-if="now_item.applyfor_type == 1" style="display: flex;font-size: 16px;margin-top: 20px;">
			  <div style="width: 25%;">是否激活听力：</div>
			  <div v-if="now_item.is_hearing == 1">激活</div>	  
			  <div v-else>未激活</div>	  
		  </div>
		  
		  <div v-if="now_item.applyfor_type == 1" style="display: flex;font-size: 16px;margin-top: 20px;">
			  <div style="width: 25%;">是否激活阅读理解：</div>
			  <div v-if="now_item.is_reading == 1">激活</div>	  
			  <div v-else>未激活</div>	  
		  </div>
		  
		  
		  <div style="display: flex;font-size: 16px;margin-top: 20px;">
			  <div style="width: 25%;">申请类型：</div>
			  <div>{{now_item.applyfor_type_details}}</div>	  
		  </div>
		  
		  
		  <div  style="display: flex;font-size: 16px;margin-top: 20px;">
			  <div style="width: 25%;">所属班级：</div>
			  <div>{{now_item.class_text}}</div>	  
		  </div>
		  
		 <!-- <div v-if="now_item.applyfor_type == 1" style="display: flex;font-size: 16px;margin-top: 20px;">
			  <div style="width: 25%;">年龄：</div>
			  <div>{{now_item.age}}</div>	  
		  </div> -->
		  
		  <div v-if="now_item.applyfor_type == 1" style="display: flex;font-size: 16px;margin-top: 20px;">
			  <div style="width: 25%;">所属区域：</div>
			  <div>{{now_item.agent_province}}-{{now_item.agent_city}}-{{now_item.agent_district}}-{{now_item.detailed_address}}</div>	  
		  </div>
		  
		  <div v-if="now_item.applyfor_type == 1 || now_item.applyfor_type == 2" style="display: flex;font-size: 16px;margin-top: 20px;">
			  <div style="width: 25%;">毕业年：</div>
			  <div>{{now_item.graduate_text}}年</div>	  
		  </div>
		  
		  <!-- <div v-if="now_item.applyfor_type == 1" style="display: flex;font-size: 16px;margin-top: 20px;">
			  <div style="width: 25%;">是否是测试号：</div>
			  <div v-if="now_item.is_ceshi == 1">测试号</div>	  
			  <div v-if="now_item.is_ceshi == 2">否</div>	  
		  </div> -->
		  
		  <div v-if="now_item.applyfor_type == 1 && (now_item.class == 1 || now_item.class == 2 || now_item.class == 3 || now_item.class == 7)" style="display: flex;font-size: 16px;margin-top: 20px;">
			  <div style="width: 25%;">年级规划：</div>
			  <div v-if="now_item.grade_plan == 1">五四制</div>	  
			  <div v-if="now_item.grade_plan == 2">六三制</div>	  
		  </div>
		  
		  <div v-if="now_item.applyfor_type == 1" style="display: flex;font-size: 16px;margin-top: 20px;">
			  <div style="width: 25%;">是否复读：</div>
			  <div v-if="now_item.is_repeat == 1">是</div>	  
			  <div v-if="now_item.is_repeat == 2">否</div>	  
		  </div>
		  
		  <div v-if="now_item.applyfor_type == 1" style="display: flex;font-size: 16px;margin-top: 20px;">
			  <div style="width: 25%;">是否延期：</div>
			  <div v-if="now_item.is_extend == 1">否</div>	  
			  <div v-if="now_item.is_extend == 2">延期</div>	  
		  </div>
		  
		  <div style="display: flex;font-size: 16px;margin-top: 20px;">
			  <div style="width: 25%;">代理商所属分组：</div>
			  <div>{{now_item.grouping_name}}</div>	  
		  </div>
		  
		  <div v-if="now_item.applyfor_type == 1" style="display: flex;font-size: 16px;margin-top: 20px;">
			  <div style="width: 25%;">备注：</div>
			  <div>{{now_item.mark}}</div>	  
		  </div>
		  
		  <!-- <div style="display: flex;font-size: 16px;margin-top: 20px;">  
			  <div style="width: 25%;">审核：</div>
			  <div>
				<el-radio-group v-model="apply_status">
				  <el-radio :label="1">同意</el-radio>
				  <el-radio :label="2">拒绝</el-radio>
				</el-radio-group>
			  </div>	  
		  </div>

		<div style="margin-top: 20px;" v-if="apply_status == 2">
			<el-input v-model="refuse_text" placeholder="请输入拒绝原因"></el-input>
		</div>	 -->	 
	  </div>
	  
	  <!-- <span slot="footer" class="dialog-footer">
	    <el-button @click="dialogVisible = false">取 消</el-button>
	    <el-button type="primary" @click="toexamine">确 定</el-button>
	  </span> -->
	</el-dialog>
	
	
	
	
  </div>
</template>
<script>
import { mapState, mapMutations } from 'vuex';
import { levelListApi, setShowApi, createApi ,applyForExamine} from '@/api/user';
import taskList from './handle/task';
export default {
  name: 'user_level',
  components: { taskList },
  data() {
    return {
		
		dialogVisibleTwo: false, 
	  
		 dialogVisible: false, 
		 apply_status:1,  //审核状态
		refuse_text:'', //拒绝原因
		examine_id:'',  //要审核的ID
		account_end_time:'',  //到期时间
		
		now_item:{},
		roles:'',
		
      grid: {
        xl: 7,
        lg: 7,
        md: 12,
        sm: 24,
        xs: 24,
      },
      loading: false,
      levelFrom: {
        apply_status: '',
		apply_type:'',
        real_name: '',
        page: 1,
        limit: 15,
		account:'',
      },
      levelLists: [],
      total: 0,
      FromData: null,
      imgName: '',
      visible: false,
      levelId: 0,
      modalTitleSs: '',
      titleType: 'level',
      modelTask: false,
      num: 0,
    };
  },
  created() {
    this.getList();
  },
  computed: {
    ...mapState('media', ['isMobile']),
    labelWidth() {
      return this.isMobile ? undefined : '80px';
    },
    labelPosition() {
      return this.isMobile ? 'top' : 'right';
    },
  },
  methods: {
    ...mapMutations('userLevel', ['getlevelId']),
	
	yantsie(copy_text){
		
		
		// const text = "这是第一行\n这是第二行";
		    const textarea = document.createElement("textarea");
		    document.body.appendChild(textarea);
		    textarea.value = copy_text;
		    textarea.select();
		    document.execCommand('copy');
		    document.body.removeChild(textarea);
		    alert("复制成功");
		
		
	},
	
	//审核
	toexamine(){
	
		var that = this
		applyForExamine({
			apply_status:that.apply_status,
			refuse_text:that.refuse_text,
			examine_id:that.examine_id,
			account_end_time:that.account_end_time
		})
		  .then(async (res) => {
			  that.$message.success(res.msg);
			  that.dialogVisible = false
			  this.getList();
		  })
		  .catch((res) => {
		    this.loading = false;
		    this.$message.error(res.msg);
		  });
	},  
	
	applay(row){
		this.apply_status = 1;
		this.refuse_text = '';
		this.examine_id = row.id;
		this.account_end_time = '';	  
		this.dialogVisible = true;
		this.now_item =  row
	},
	
    // 操作
    changeMenu(row, name, num) {
      this.levelId = row.id;
      switch (name) {
        case '1':
          this.getlevelId(this.levelId);
          this.$refs.tasks.modals = true;
          this.$refs.tasks.getList();
          break;
        case '3':

		  this.dialogVisibleTwo = true;
		  this.now_item =  row
		  
          break;
        default:
          this.del(row, '删除记录', num);
      }
    },
    // 删除
    del(row, tit, num) {
      let delfromData = {
        title: tit,
        num: num,
        url: `user/user_level/delete/${row.id}`,
        method: 'put',
        ids: '',
      };
      this.$modalSure(delfromData)
        .then((res) => {
          this.$message.success(res.msg);
          this.levelLists.splice(num, 1);
          this.total--;
        })
        .catch((res) => {
          this.$message.error(res.msg);
        });
    },
    // 删除成功
    // submitModel () {
    //     this.levelLists.splice(this.delfromData.num, 1)
    // },
    // 修改是否显示
    onchangeIsShow(row) {
      let data = {
        id: row.id,
        is_show: row.is_show,
      };
      setShowApi(data)
        .then(async (res) => {
          this.$message.success(res.msg);
        })
        .catch((res) => {
          this.$message.error(res.msg);
        });
    },
    // 等级列表
    getList() {
      this.loading = true;
      this.levelFrom.is_show = this.levelFrom.is_show || '';
      levelListApi(this.levelFrom)
        .then(async (res) => {
          let data = res.data;
          this.levelLists = data.list;
          this.total = res.data.count;
		  this.roles = res.data.roles
          this.loading = false;
        })
        .catch((res) => {
          this.loading = false;
          this.$message.error(res.msg);
        });
    },
    // 添加
    add() {
      this.levelId = 0;
      this.$modalForm(createApi({ id: this.levelId })).then(() => this.getList());
    },
    // 编辑
    edit(row) {
      this.levelId = row.id;
      this.$modalForm(createApi({ id: this.levelId })).then(() => this.getList());
      this.getlevelId(this.levelId);
    },
    // 表格搜索
    userSearchs() {
      this.levelFrom.page = 1;
      this.getList();
    },
    // 修改成功
    submitFail() {
      this.getList();
    },
  },
};
</script>

<style scoped lang="stylus">
.tabBox_img
    width 36px
    height 36px
    border-radius:4px
    cursor pointer
    img
        width 100%
        height 100%
</style>
